import Vue from "vue";
//import App from './App.vue'
//import store from '@/store'
import VueI18n from "vue-i18n";
//todo 引入下面的js，准备使用双层架构，既可以在app内使用，也可以在浏览器端开发调试
import appCommon from "./doubleApi";
import Storage from "./storage";
import toast from '@/plugins/toast'
import message from '@/plugins/message'
import * as mainCss from "../assets/style/main.scss";
import customComponents from "@/components/wms"

import vuetify from "@/plugins/vuetify";
import http from "@/utils/http";
// 注册一个全局自定义指令 `v-focus` <input v-focus>
Vue.directive("focus", {
  //updated函数 当被绑定的元素插入到 DOM 中时……当组件 VNode 更新时，执行 updated，可能会触发多次
  update: function (el, { value }) {
    //这种会影响其他文本框的输入
    // 聚焦元素
    if (value) el.focus();
  }
});
Vue.directive("initFocus", {
  //inserted函数（和JS行为有关的操作，最好在 inserted 中 去执行，防止 JS行为不生效）元素 插入到DOM中时，执行 inserted函数，只触发一次
  inserted: function (el, { value }) {
    //这种只会在页面加载时将焦点移到控件上
    // 聚焦元素
    if (value) el.focus();
  }
});
Vue.directive("bindFocus", {
  //注意：在每个函数中,第一个参数永远是 el,表示被绑定了指令的那个元素,这个 el参数是一个元素的 原生的JS对象
  //bind函数（和样式相关的操作，一般都可以在 bind 中执行）绑定到元素上的时候，立即执行 bind函数，只执行一次
  bind: function (el, { value }) {
    // 聚焦元素
    if (value) el.focus();
  }
});
console.log("start")
Vue.prototype.$http = http;
Vue.prototype.$message = message;
Vue.prototype.$toast = toast;

class Start {
  App = {};
  AppId = "#app";
  constructor(app, appId) {
    this.App = app;
    this.AppId = appId || this.AppId;
  }

  ready(...usePackage) {
    usePackage = [VueI18n, ...usePackage];
    usePackage.forEach(item => {
      Vue.use(item);
    });

    // 定义全局组件
    Object.keys(customComponents).forEach((componentName) => {
      Vue.component(componentName, customComponents[componentName]);
    });

    let lang = Storage.getObject("lang");
    const i18n = new VueI18n({
      locale: lang ? lang.value : "cn",
      fallbackLocale: "cn",
      messages: {
        cn: require("./lang/cn"), // 中文语言包
        en: require("./lang/en") // 英文语言包
      },
      silentTranslationWarn: true //去掉 无法转换keypath'....'的值 的报错
    });

    Vue.config.productionTip = false;
    //解决app的一个报错提醒：[WDS] Disconnected!
    module.hot ? module.hot.accept() : null;

    const doubleProp = new appCommon.DoubleProp();
    window[doubleProp.ready] = () => {
      let doubleApi = new appCommon.DoubleApi(window.api);
      new Vue({
        //store,
        i18n,
        vuetify,
        data: {
          api: doubleApi
        },
        render: h => h(this.App)
      }).$mount(this.AppId);
    };
  }
}

export default {
  Start,
  // materialIcons,
  mainCss
};
